<template>
  <div>
   <el-row>
    <el-col :span="8" ><div class="grid-content bg-purple">
        <el-card class="box-card" shadow="hover">
           <div class="user">
            <img :src="userinfo.icon" alt="">
            <div class="userinfo">
              <p id="name">{{ userinfo.user.nickname}}</p>
              <p style="margin-left: 100px;">{{ username }}</p>
              <p id="info">{{ role }}</p>
            </div>
            
           </div>  
            <!-- <div>
              <p>上次登录时间：<span class="logininfo">2023-12-21</span></p>
              <p>上次登录地点：<span class="logininfo">新乡</span></p>
            </div> -->
        </el-card>  
        <el-card  shadow="hover" style="margin-top:20px;height:440px">
          <p style="margin-left: 140px;font-size: 20px;">最火的前五个文章</p>
          <el-table 
            :data="tableData"                                        
            stripe
            style="width:100%">
            <el-table-column
              prop="title"
              label="标题">
            </el-table-column>
            <el-table-column
              prop="likes"
              label="点赞">
            </el-table-column>
            <el-table-column
              prop="comments"
              label="评论">
            </el-table-column>
            <el-table-column
              prop="shares"
              label="收藏">
            </el-table-column>
     
      
           </el-table>
        </el-card> 
        </div>
    </el-col>
    <el-col :span="16" class="right">
      <div class="num">
        <el-card v-for="item in saleInfo" :key="item.id" class="slaeinfo" :body-style="{display:'flex',height:'80px'}" shadow="hover">                                
          <i :class="`el-icon-${item.icon}`" class="icon"></i>
          <div class="numinfo">
             <p id="price">{{ item.price }}</p>
             <p id="name">{{ item.name }}</p>
          </div>
          
        </el-card>
         
        <div class="rightbottom">
           <el-card style="height:220px" class="zhe"  shadow="hover">
             <div id="echarts1" style="width:900px;height: 250px">
               
             </div>
        </el-card>

        <!-- <div class="two">
          <el-card style="height;:200px" class="flex"  shadow="hover">
            <div id="echarts2" style="width:400px;height: 200px"></div>
          </el-card>
          <el-card style="height:200px" class="flex"  shadow="hover">
            <div id="echarts3" style="width:400px;height: 200px"></div>
          </el-card>
        </div> -->

        </div>
       
      </div>
        
      
    </el-col>
   </el-row>
  </div>
</template>
<script>
import reqHome from '@/api/home'
import * as echarts from 'echarts';
export default {
   
  created(){
    //查询文章统计情况
        this.getArticleDatas(this.$store.state.userinfo.user.id)
    //查询最火的文章
        this.getHotArticles(this.$store.state.userinfo.user.id)
  },

      mounted(){
        
        this.getUserinfo(this.$store.state.userinfo.user.id)
                // 基于准备好的dom，初始化echarts实例
        // var myChart1 = echarts.init(document.getElementById('echarts1'));
        // // 绘制图表
        // myChart1.setOption({
        //             xAxis: {
        //       type: 'category',
        //       data: ['苹果', '华为', '小米','oppo']
        //     },
        //     yAxis: {
        //       type: 'value'
        //     },
        //     series: [
        //       {
        //         data: [120, 200, 150,422],
        //         type: 'line'
        //       },
        //       {
        //         data: [500, 213, 423,422],
        //         type: 'line'
        //       },
        //       {
        //         data: [432, 233, 123,522],
        //         type: 'line'
        //       }
        //     ]
        // });

        // var myChart2 = echarts.init(document.getElementById('echarts2'));
        //   // 绘制图表
        //   myChart2.setOption({
        //           title: {
        //             text: 'ECharts 入门示例'
        //           },
        //           tooltip: {},
        //           xAxis: {
        //             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //           },
        //           yAxis: {},
        //           series: [
        //             {
        //               name: '销量',
        //               type: 'bar',
        //               data: [5, 20, 36, 10, 10, 20]
        //             }
        //           ]
        //         });

        //  var myChart3 = echarts.init(document.getElementById('echarts3'));
        //    // 绘制图表
        //    myChart3.setOption({
        //     series: [
        //             {
        //               type: 'pie',
        //               data: [
        //                 {
        //                   value: 335,
        //                   name: '直接访问'
        //                 },
        //                 {
        //                   value: 234,
        //                   name: '联盟广告'
        //                 },
        //                 {
        //                   value: 1548,
        //                   name: '搜索引擎'
        //                 }
        //               ]
        //             }
        //           ]
        //         });
      },
        data(){
          return{
            //用户信息
            userinfo:{},
            username:'',
            //角色
            role:'',
            //统计数据
            todayLikes:'',
            todayComments:'',
            todayCares:'',
            totalLikes:'',
            totalComments:'',
            totalCares:'',    
            //最火的前五个文章
            tableData:[ ],
            
           
            saleInfo:[
              { 
                id:1,
                name:"今日点赞量",
                price:0,
                icon:"thumb"
              },
              {
                id:2,
                name:"累计点赞量",
                price:0,
                icon:"thumb"
              },
              {
                id:3,
                name:"今日评论量",
                price:0,
                icon:"chat-dot-square"
              },
              {
                id:4,
                name:"累计评论量",
                price:0,
                icon:"chat-line-square"
              },
              {
                id:5,
                name:"今日收藏量",
                price:0,
                icon:"star-off"
              },
              {
                id:6,
                name:"累计收藏量",
                price:0,
                icon:"star-on"
              },
            ]
          }
        },
        methods:{
          //查询用户个人信息
         async getUserinfo(userid){
            const res = await reqHome.getUserInfo(userid)
            if(res.code==200){            
              this.userinfo = res.data
              this.username = res.data.user.username
              this.$store.state.userinfo.icon = res.data.icon
              if(res.data.user.role==1) this.role="用户"
              else if(res.data.user.role==2) this.role="审核员"
              else this.role = "超级管理员"           
            } 
            else this.$message(res.message)
          },
          //查询统计情况
         async getArticleDatas(userid){
           const res = await reqHome.getArticleDatas(userid)
           if(res.code==200){
            this.todayLikes = res.data.todayLikes;
            this.todayComments = res.data.todayComments;
            this.todayCares = res.data.todayCares;
            this.totalLikes = res.data.totalLikes;
            this.totalComments = res.data.totalComments;
            this.totalCares = res.data.totalCares;
            this.saleInfo[0].price =  this.todayLikes
            this.saleInfo[1].price = this.totalLikes
            this.saleInfo[2].price = this.todayComments
            this.saleInfo[3].price = this.totalComments
            this.saleInfo[4].price = this.todayCares
            this.saleInfo[5].price = this.totalCares

            // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts1'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: '文章统计情况'
          },
          tooltip: {},
          xAxis: {
            data: ['今日点赞', '累计点赞', '今日评论', '累计评论', '今日收藏', '累计收藏']
          },
          yAxis: {},
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [this.todayLikes,this.totalLikes,this.todayComments,
                     this.totalComments,this.todayCares,this.totalCares]
              // data:[12,123,312,312,312,123]
            }
          ]
        });

           }
         },
         //查询最火的前五个文章
         async getHotArticles(userid){
          const res =await reqHome.getHotArticles(userid);
          if(res.code==200){
            this.tableData = res.data.records;
          }
         }


        }
}
</script>

<style lang="less" scoped>

.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #a7a0a0;
  img{
    width:150px;
    height: 150px;
    border-radius: 50%;
  }
  #info{
    margin-left: 100px;
    font-size: 18px;
    color: #5a53537d;
  }
  #name{
    margin-left: 100px;
    font-size: 25px;
    font-weight: 700;
  }
}
.logininfo{
  margin-left: 50px;
  font-size: 14px;
  color: #535151;
}
.saleinfo{
  width:32%;
  display: flex;
  flex-wrap: wrap;
  
}
.num{
  display: flex;
  flex-wrap: wrap;
  .icon{
    width:80px;
    height:80px;
    font-size: 30px;
   
    background: #29d4ef;
    text-align: center;
    line-height: 80px;
  }
  .numinfo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    #price{
      margin-left: 30px;
      font-size: 20px;
    }
    #name{
      margin-left: 30px;
      font-size: 16px;
      color: #c9baba;
      text-align: center;
    }
  }
}
.right{
 
  .el-card{
  width:32%;
  margin-bottom: 20px;
  margin-left: 10px;
}
  
}
.rightbottom{
  margin-left: 20px;
  .el-card{
    width:900px
  }
.two{
  display: flex;
  justify-content: space-between;
  .flex{
    width:48%
  }
}

}


</style>